<template>
	<view class="wrap">
		<view class="address u-flex  u-p-t-30 u-p-b-30">
			 <view class="u-flex-2">
				 <view class="icon u-text-center ">
				 	<!-- <u-icon name="chat-fill" color="white" size="40"></u-icon>	 -->
				 	<u-icon :name="orderStatus.iconName" color="white" size="40"></u-icon>	
				 </view>
			 </view>
			
			<view class="u-flex-8">
				<view class="addressInfo">
					{{orderStatus.title}}
				</view>
				<view class="userInfo">
					{{orderStatus.description}}
				</view>
				
				
			</view>
			
		</view>
		
		<view class="goods u-p-t-10 u-p-b-30">
			<view class="u-m-20 ">
				<view style="font-size: 32rpx;font-weight: 700;">咚咚图书出版社</view>
			</view>
			
			
			<view v-for="(item,index) in orderInfo.details"  class="u-m-l-20 u-m-r-20 u-m-b-20 u-flex" style="line-height: 50rpx;">
				<view class="u-p-r-20 u-flex-4" >
					<u-image width="200rpx" height="200rpx" :src="vuex_user.store + item.book.img" border-radius="20rpx"></u-image>
				</view>
				<view class="u-flex-8" style="width: 400rpx;">
					<view class="u-line-2">{{item.name}}</view>
					<view class="u-line-1" style="color: #82848A;">{{item.book.author}}</view>
					<!-- <u-tag text="书籍商品无法退货" mode="light" type="warning"/> -->
				</view>
				<view class="u-p-l-10 u-flex-2" style="text-align: right;">
					<view >￥{{item.price | rounding}}</view>
					<view style="color: #82848A; font-size: 20rpx;" >×{{item.count}}</view>
				</view>
			</view>
			
			<view class="u-m-t-20 u-text-right">
				
				<view class="u-m-r-20">
					<text style="font-size: 33rpx;font-weight: bolder;">实付款</text>
					<text style="font-size: 25rpx;font-weight: bolder;color: red;">￥</text>
					<text style="font-size: 33rpx;font-weight: bolder;color: red;">{{orderInfo.price | rounding }}</text>
				</view>
			</view>
		</view>
		
		<view class="extend u-p-t-10 u-p-b-20" >
			<u-cell-group :border="false" title="订单信息" >
				<u-cell-item :border-bottom="false" title="收货信息" :value="orderInfo.receiver +', '+orderInfo.tel+', '+orderInfo.address" :arrow="false" :value-style="valueStyle"></u-cell-item>
				<u-cell-item v-if="orderInfo.note" :border-bottom="false" title="订单备注" :value="orderInfo.note" :arrow="false" :value-style="valueStyle"></u-cell-item>
				<u-cell-item :border-bottom="false" title="订单编号" :value="orderInfo.outTradeNo" :arrow="false" :value-style="valueStyle"></u-cell-item>
				<u-cell-item :border-bottom="false" title="创建时间" :value="orderInfo.createdTime" :arrow="false" :value-style="valueStyle"></u-cell-item>
				<u-cell-item v-if="orderInfo.payTime" :border-bottom="false" title="付款时间" :value="orderInfo.payTime" :arrow="false" :value-style="valueStyle"></u-cell-item>
				<u-cell-item v-if="orderInfo.cancelTime&&orderStatus.index==0" :border-bottom="false" title="取消时间" :value="orderInfo.cancelTime" :arrow="false" :value-style="valueStyle"></u-cell-item>
				<u-cell-item v-if="orderInfo.expressTime" :border-bottom="false" title="发货时间" :value="orderInfo.expressTime" :arrow="false" :value-style="valueStyle"></u-cell-item>
				<u-cell-item v-if="orderInfo.receivedTime" :border-bottom="false" title="成交时间" :value="orderInfo.receivedTime" :arrow="false" :value-style="valueStyle"></u-cell-item>
			</u-cell-group>
		</view>
		
		
		
		<view class="bottomFixed u-flex u-p-15">
			<view class="u-flex-5">
				
			</view>
			<view class="u-text-right">
				<view class="u-flex" v-if="orderStatus.index==0">
					<u-button type="error" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true" @click="delOrder">删除订单</u-button>
					<!-- <u-button type="warning" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true" >加入购物车</u-button> -->
				</view>
				<view class="u-flex" v-if="orderStatus.index==1">
					<u-button type="error" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true" @click="cancleOrder" >取消订单</u-button>
					<u-button @click="toPay" type="warning" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true" >支付</u-button>
				</view>
				<view class="u-flex" v-if="orderStatus.index==2">
					<u-button type="error" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true" @click="confirmReceipt" >确认收货</u-button>
				</view>
				<view class="u-flex" v-if="orderStatus.index==3">
					<u-button type="error" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true" @click="confirmReceipt">确认收货</u-button>
				</view>
				<view class="u-flex" v-if="orderStatus.index==4">
					<u-button type="error" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true"  @click="delOrder">删除订单</u-button>
					<u-button type="warning" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true" @click="toEvaluate">去评价</u-button>
				</view>
				<view class="u-flex" v-if="orderStatus.index==5">
					<u-button type="error" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true"  @click="delOrder">删除订单</u-button>
					<u-button type="warning" :ripple="true" shape="circle"  class="u-m-l-20" :plain="true" @click="toEvaluate">查看评价</u-button>
				</view>
			</view>
		</view>
		<u-modal class="u-text-center" v-model="payShow" @cancel="payCancel" :mask-close-able="true" ref="uModal"  title="扫码支付" :show-cancel-button="true" >
			<view class="slot-content u-text-center u-m-t-40" style="width: 100%;">
				<image :src="qrCode" style="width: 390rpx;height: 390rpx;"></image>
			</view>
		</u-modal>
		<u-modal v-model="delModal" content="确定删除订单吗" title="删除" @confirm="delConfirm" :show-cancel-button="true"></u-modal>
		<u-modal v-model="cancleModal" content="确定取消订单吗" title="取消订单" @confirm="cancleConfirm" :show-cancel-button="true"></u-modal>
		<u-modal v-model="confirmModal" content="为了保证您的收货权益,请收到商品确认无误后在确认收货" title="确认收到货了吗" @confirm="confirmConfirm" :show-cancel-button="true"></u-modal>
		
	</view>
</template>

<script>
	import uQRCode from '@/components/uqrcode/common/uqrcode.js'
	export default {
		data() {
			return {
				orderInfo:{
					price:0
				},
				orderStatusList:[{
					index:0,
					iconName:'close-circle-fill',
					title:'您的申请正在审核，请稍等！',
					description:' '
				},{
					index:1,
					iconName:'error-circle-fill',
					title:'就等您付款啦',
					description:''
				},{
					index:2,
					iconName:'clock-fill',
					title:'等待商家发货',
					description:'商家正在努力为您备货'
				},{
					index:3,
					iconName:'car-fill',
					title:'您的宝贝在路上咯~',
					description:''
				},{
					index:4,
					iconName:'more-circle-fill',
					title:'交易成功啦',
					description:'写评价分享你的购物心情吧'
				},{
					index:5,
					iconName:'checkmark-circle-fill',
					title:'交易成功啦',
					description:'继续寻找新的宝贝吧~'
				},
				],
				orderStatus:{},
				imgSrc:'../../static/img/center.png',
				remark:'',
				popupShow:false,
				userRemark:'',
				addressInfo:{},
				goodsIdList:{},
				goodsIdListCount:0,
				valueStyle:{
					marginLeft:'40rpx',
					textAlign:'left'
				},
				orderId:0,
				bookIdList:[],
				
				payShow:false,
				content:``,
				
				qrCode:'',
				qrShow:true,
				delModal:false,
				confirmModal:false,
				cancleModal:false,
				operateId:0,
			}
		},
		onShow() {
			this.getOrderDetial()
		},
		onLoad(val){
			this.orderId = val['oid']
			
			
		},
		methods: {
			
			//去评价
			toEvaluate(){
				// console.log(val,val2)
				this.$u.route({
					url:'pages/order/orderEvaluate',
					params:{
						oid:this.orderId,
						
					}
				})
			},
			//订单确认收货 确认按钮
			async confirmConfirm(){
				const res = await this.$u.api.confirmReceipt(this.orderId)
				if(res==null){
					this.$u.toast("确认收货成功！快去评价商品吧")
					this.getOrderDetial()
					
					// this.$u.route({
					// 	url:'pages/order/orderEvaluate',
					// 	params:{
					// 		oid:this.orderId
					// 	}
					// })
				}
			},
			
			//订单确认收货
			confirmReceipt(){
				if(this.orderStatus.index != 3){
					
					this.$u.toast("商品还没发货哦！请耐心等待卖家发货")
					return
				}
				this.confirmModal = true
				
			},
			
			//取消订单弹窗确认按钮事件
			async cancleConfirm(){
				const res = await this.$u.api.cancleOrder(this.orderId)
				if(res==null){
					this.$u.toast("订单取消成功")
					setTimeout(()=>{
						this.getOrderDetial()
					},1000)
					
					
				}
				
			},
			//取消订单
			cancleOrder(val){
				this.cancleModal = true
				
			},
			
			//删除订单弹窗确认按钮事件
			async delConfirm(){
				const res = await this.$u.api.delOrder(this.orderId)
				
				if(res==null){
					this.$u.toast("订单删除成功")
					setTimeout(()=>{
						this.$u.route({
							url:'/pages/center/allOrder'
						})
					},1000)
					
				}
				
			},
			//删除订单
			delOrder(){
				this.delModal = true

			},
			
			
			payCancel(){
				this.payShow = false
			},
			async confirmPay(){
				var flag = true
				setTimeout(()=>{
					flag = false
				},15*60*1000)
				
				while(flag){
					const res = await this.$u.api.confirmPay(this.orderId)
					if(res['state']=='sucess'){
						flag = false
						this.$u.toast("支付成功")
						this.payShow = false
						this.$u.route({
							type:'redirect',
							url:'/pages/order/result',
							params:{
								oid : this.orderId,
								outTradeNo:this.orderInfo.outTradeNo
							}
								
							
						})
					}
				}
				
			},
			//去支付
			async toPay(){
				this.payShow = true
				this.confirmPay()
				
			},

			async getOrderDetial(){
				const res = await this.$u.api.getOrderDetail(this.orderId)
				if(res!=null){
					this.orderInfo = res
					
					if(res.status==3){
						this.orderStatusList[3].description = res.expressCompany+" 单号: "+res.express
					}
					this.orderStatus = this.orderStatusList[res.status]
					console.log(this.orderInfo)
					//获取阿里支付二维码
					this.qrCode = res.qrCodeImg
					
					
				}
				
			},

		}
	}
</script>

<style scoped lang="scss">

	.wrap{
		background-color: #f3f4f6;
		padding-bottom: 200rpx;
		padding-top: 10rpx;
		.address{
			
			width: 700rpx;
			margin: 25rpx;
			border-radius: 10rpx;
			background-color: #fff;
			.addressInfo{
				font-weight: bolder;
				font-size: 32rpx;
			}
			.userInfo{
				margin-top: 20rpx;
				color: #909399;
			}
		}
		.icon{
			line-height: 55rpx;
			width: 50rpx;
			height: 50rpx;
			background-color: #FA3534;
			border-radius: 50%;
			margin: 0 auto;
		}
	}
	.extend{
		width: 700rpx;
		margin: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.goods{
		
		width: 700rpx;
		margin: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.prices{
		
		width: 700rpx;
		margin: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}
	
	.bottomFixed {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #fff;
	}
	
	/*#ifdef H5*/
	.bottomFixed {
		bottom: 0rpx;
	}
	
	/*#endif*/
	/*#ifdef APP*/
	.bottomFixed {
		bottom: 0rpx;
	}
	
	/*#endif*/
	
	/*#ifdef MP-WEIXIN*/
	.bottomFixed {
		bottom: 0;
		
	}
	
	/*#endif*/
	.price{
		font-size: 50rpx;
		color: #fa6418;
		font-weight: 800;
	}
	.title{
		font-size: 26rpx;
	}
	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
		
		height: 420rpx;
	}
	.canvas-hide {
		/* 1 */
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		/* 2 */
		z-index: -9999;
		/* 3 */
		opacity: 0;
	}
</style>
